{% extends 'base/base1.html' %}
{% load static %}
{% load my_filter %}

{% block title %}
    主页
{% endblock %}

{% block css %}
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
    }

    .main-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 轮播图样式 */
    .carousel-section {
        margin-bottom: 40px;
    }

    .slider {
        position: relative;
        width: 100%;
        height: 450px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .slide.active {
        opacity: 1;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;
        padding: 20px;
        text-align: center;
        z-index: 2;
    }

    .slide-content h3 {
        font-size: 1.8rem;
        margin-bottom: 10px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }

    .slide-content p {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 1.5rem;
        color: #333;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    .slider-btn:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-50%) scale(1.1);
    }

    .slider-dots {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
    }

    .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background: white;
        transform: scale(1.2);
    }

    .btn {
        display: inline-block;
        background: #4a6ee0;
        color: white;
        padding: 8px 20px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
        transition: background 0.3s;
        border: none;
        cursor: pointer;
    }

    .btn:hover {
        background: #3a5bc7;
        color: white;
        text-decoration: none;
    }

    /* 轮播图控制按钮 */
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.8);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 1.5rem;
        color: #333;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .carousel-control:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transform: translateY(-50%) scale(1.1);
    }

    /* 强化左右按钮分布 */
.carousel-control.prev {
    left: 10px;
    right: auto;
}

.carousel-control.next {
    right: 10px;
    left: auto;
}


.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    justify-content: center;
    list-style: none;
}

    .indicator {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .indicator:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: scale(1.2);
    }

    .indicator.active {
        background: white;
        transform: scale(1.2);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }

    /* 产品列表样式 */
    .products-section {
        background: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
    }

    .page-title {
        text-align: center;
        color: #2c3e50;
        margin: 0 0 30px 0;
        font-weight: 700;
        position: relative;
        padding-bottom: 15px;
    }

    .page-title:after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background: #3498db;
        margin: 10px auto;
        border-radius: 2px;
    }

    .home-img {
        width: 100%;
        height: 170px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .product-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        padding: 20px;
        margin-bottom: 25px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .product-info h4 {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 1.3rem;
    }

    .product-info h5 {
        color: #555;
        margin-bottom: 8px;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-action {
        margin-top: 15px;
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
        width: 100%;
        text-align: center;
        text-decoration: none;
        display: block;
        border: none;
        cursor: pointer;
    }

    .btn-edit {
        background-color: #e74c3c;
        color: white;
    }

    .btn-edit:hover {
        background-color: #c0392b;
        transform: scale(1.05);
        color: white;
        text-decoration: none;
    }
    
    .btn-delete {
        background-color: #e74c3c;
        color: white;
    }
    
    .btn-delete:hover {
        background-color: #c0392b;
        transform: scale(1.05);
        color: white;
        text-decoration: none;
    }

    .btn-view {
        background-color: #f39c12;
        color: white;
    }

    .btn-view:hover {
        background-color: #e67e22;
        transform: scale(1.05);
        color: white;
        text-decoration: none;
    }

    .divider {
        border: none;
        height: 1px;
        background: linear-gradient(to right, transparent, #2aabd2, transparent);
        margin: 25px 0;
    }

    /* 分页样式 */
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        padding: 20px 0;
    }

    .pagination {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 5px;
    }

    .pagination > li > a {
        color: #3498db;
        border: 1px solid #ddd;
        margin: 0;
        border-radius: 4px;
        transition: all 0.3s ease;
        padding: 8px 16px;
        text-decoration: none;
        display: block;
    }

    .pagination > li > a:hover {
        background-color: #3498db;
        color: white;
        border-color: #3498db;
    }

    .pagination > .active > a {
        background-color: #3498db;
        border-color: #3498db;
        color: white;
    }

    .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .carousel {
            height: 350px;
        }

        .carousel-caption h3 {
            font-size: 1.4rem;
        }

        .carousel-caption p {
            font-size: 1rem;
        }

        .carousel-control {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .carousel-control.prev {
            left: 10px;
        }

        .carousel-control.next {
            right: 10px;
        }

        .main-container {
            padding: 15px;
        }

        .products-section {
            padding: 20px;
        }
    }

    @media (max-width: 576px) {
        .carousel {
            height: 250px;
        }

        .carousel-caption {
            padding: 15px;
        }

        .carousel-caption h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .carousel-caption p {
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .carousel-indicators {
            bottom: 15px;
        }

        .indicator {
            width: 10px;
            height: 10px;
        }

        .btn {
            padding: 6px 12px;
            font-size: 0.9rem;
        }

        .product-info h4 {
            font-size: 1.1rem;
        }

        .btn-action {
            padding: 8px 15px;
            font-size: 0.9rem;
        }
    }
</style>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.slide');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        const dots = document.querySelectorAll('.dot');
        
        let currentSlide = 0;
        const totalSlides = slides.length;
        
        function showSlide(index) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            slides[index].classList.add('active');
            dots[index].classList.add('active');
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }
        
        function prevSlide() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(currentSlide);
        }
        
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);
        
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentSlide = index;
                showSlide(currentSlide);
            });
        });
        
        setInterval(nextSlide, 4000);
    });
</script>
{% endblock %}

{% block main %}
<div class="main-container">
    <!-- 轮播图部分 -->
    <section class="carousel-section">
        <div class="slider">
            <div class="slide active">
                <img src="{% static 'img/轮播图.png' %}" alt="第一张轮播图">
                <div class="slide-content">
                    <h3>欢迎来到我们的商城</h3>
                    <p>发现更多精彩产品</p>
                </div>
            </div>
            <div class="slide">
                <img src="{% static 'img/轮播图1.png' %}" alt="第二张轮播图">
                <div class="slide-content">
                    <h3>品质保证</h3>
                    <p>为您提供最优质的产品和服务</p>
                </div>
            </div>
            <button class="slider-btn prev-btn">&#10094;</button>
            <button class="slider-btn next-btn">&#10095;</button>
            <div class="slider-dots">
                <span class="dot active" data-slide="0"></span>
                <span class="dot" data-slide="1"></span>
            </div>
        </div>
    </section>

    <!-- 产品列表部分 -->
    <section class="products-section">
        {% if current_category %}
        <h1 class="page-title">{{ current_category.title }} 分类产品</h1>
    {% else %}
        <h1 class="page-title">产品列表</h1>
    {% endif %}
        <a href="{% url 'main:home_create' %}" class="btn btn-primary">添加产品</a>
        <div class="products-list">
            {% for product in object_list %}
                <div class="product-card">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <a href="{% url 'main:product_detail' product.pk %}">
                                <img src="/media/{{ product.img }}" alt="{{ product.name }}" class="home-img">
                            </a>
                        </div>
                        <div class="col-md-5 product-info">
                            <h4>{{ product.name }}</h4>
                            <h5><i class="fas fa-tag"></i> 产品：{{ product.category }}</h5>
                            <h5><i class="fas fa-dollar-sign"></i> 售价：{{ product.price }}</h5>
                            <h5><i class="fas fa-calculator"></i> 成本：{{ product.cost_price }}</h5>
                            <h5><i class="fas fa-boxes"></i> 库存：{{ product.stock }}</h5>
                            <h5><i class="fas fa-store"></i> 是否上架：{{product|is_active}}</h5>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex flex-column h-100 justify-content-center gap-2">
                                <a href="{% url 'main:home_update' product.id %}" class="btn-action btn-edit">
                                    <i class="fas fa-edit"></i> 编辑产品
                                </a>
                                <a href="{% url 'main:home_delete' product.id %}" class="btn-action btn-delete">
                                    <i class="fas fa-trash-alt"></i> 删除
                                </a>
                                <a href="{% url 'main:product_image_carousel' product.pk %}" class="btn-action btn-view">
                                    <i class="fas fa-eye"></i> 查看前端轮播图
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% if not forloop.last %}
                    <div class="divider"></div>
                {% endif %}
            {% empty %}
                <div class="text-center py-5">
                    <h4>暂无产品</h4>
                    <p class="text-muted">当前没有产品数据</p>
                </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <div class="pagination-container">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?pn={{ page_obj.previous_page_number }}" aria-label="Previous">
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                    {% endif %}
                        <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    {% for pn in paginator.page_range %}
                        {% if pn == page_obj.number %}
                            <li class="page-item active"><a class="page-link" href="?pn={{ pn }}">{{ pn }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?pn={{ pn }}">{{ pn }}</a></li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?pn={{ page_obj.next_page_number }}" aria-label="Next">
                    {% else %}
                        <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                    {% endif %}
                        <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        {% endif %}
    </section>
</div>
{% endblock %}